<template>
  <div>
    <div class="data-box1">
      <span>订单日期：</span>
      <el-date-picker
        v-model="valueTime"
        type="daterange"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
    </div>

    <!--  -->
    <div class="data-box2">
      <!-- 省 -->
      <div class="area">
        <span class="title">请选择省</span>
        <el-select v-model="gets.province">
          <el-option
            v-for="item in area.province"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <!-- 市 -->
      <div class="area">
        <span class="title">请选择市</span>
        <el-select v-model="gets.city" placeholder="全部市">
          <el-option
            v-for="item in area.city"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <!-- 区 -->
      <div class="area">
        <span class="title">请选择区</span>
        <el-select v-model="gets.county" placeholder="全部区">
          <el-option
            v-for="item in area.county"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <button @click="queryF">筛选</button>
    </div>

    <!--  -->
    <div class="data-box3">
      <div class="data-item">
        <h4>成交用户数量</h4>
        <div>{{datas.res2}}人</div>
      </div>
      <div class="data-item">
        <h4>用户注册统计</h4>
        <div>{{datas.korder}}人</div>
      </div>
      <div class="data-item">
        <h4>销售统计</h4>
        <div>{{datas.res}}张</div>
      </div>
    </div>

  </div>
</template>

<script>
import axios from "axios"
export default {
  created(){
    this.getData();
  },
  data() {
    return {
      valueTime: [],
      gets: {
        province: "全部省份",
        city: "",
        county: "",
      },
      area: {
        province: [
          {label:"全部省份",value:"全部省份"},
          {label:"北京市",value:"北京市"},
          {label:"天津市",value:"天津市"},
          {label:"四川省",value:"四川省"},
          {label:"河北省",value:"河北省"},
          {label:"山西省",value:"山西省"},
          {label:"内蒙古自治区",value:"内蒙古自治区"},
          {label:"辽宁省",value:"辽宁省"},
          {label:"吉林省",value:"吉林省"},
          {label:"黑龙江省",value:"黑龙江省"},
          {label:"上海市",value:"上海市"},
          {label:"江苏省",value:"江苏省"},
          {label:"浙江省",value:"浙江省"},
          {label:"安徽省",value:"安徽省"},
          {label:"福建省",value:"福建省"},
          {label:"江西省",value:"江西省"},
          {label:"山东省",value:"山东省"},
          {label:"河南省",value:"河南省"},
          {label:"湖北省",value:"湖北省"},
          {label:"湖南省",value:"湖南省"},
          {label:"广东省",value:"广东省"},
          {label:"广西壮族自治区",value:"广西壮族自治区"},
          {label:"海南省",value:"海南省"},
          {label:"重庆市",value:"重庆市"},
          {label:"贵州省",value:"贵州省"},
          {label:"云南省",value:"云南省"},
          {label:"西藏自治区",value:"西藏自治区"},
          {label:"陕西省",value:"陕西省"},
          {label:"甘肃省",value:"甘肃省"},
          {label:"青海省",value:"青海省"},
          {label:"宁夏回族自治区",value:"宁夏回族自治区"},
          {label:"新疆维吾尔自治区",value:"新疆维吾尔自治区"},
          {label:"台湾省",value:"台湾省"},
          {label:"香港特别行政区",value:"香港特别行政区"},
          {label:"澳门特别行政区",value:"澳门特别行政区"}
        ],
        city: [],
        county: [],
      },
      // datas: false,
      datas: {},
    }
  },
  methods: {
    getData() {
      axios.get("http://47.108.201.43:3000/api/getCustomerData", {
        params: {}
      }).then((res)=>{
        if(res.data.code == "200") {
          this.datas = res.data.data;
        }
      });
    },
    queryF() {
      if(this.gets.province == "全部省份") {
        this.getData();
      } else {
        axios.post("http://47.108.201.43:3000/api/queryCustomerData", {
          datas: {
            province: this.gets.province
          }
        }).then((res)=>{
          // console.log(res);
          if(res.data.code == "200") {
            this.datas.res2 = res.data.data.order;
            this.datas.korder = res.data.data.res;
            this.datas.res = res.data.data.userNum;
          }
        })
      }
    },
  }
}
</script>

<style scoped>
.data-box1 {
  margin: 30px;
  text-align: left;
}

.data-box2 {
  margin-left: 15px;
  display: flex;
  height: 40px;
  align-items: center;
}
.data-box2 .area {
  display: flex;
  align-items: center;
  text-align: center;
}
.data-box2 button {
  width: 70px;
  height: 40px;
}

.data-box3 {
  widows: inherit;
  display: flex;
  margin: 30px;
}
.data-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-right: 20px;
  width: 250px;
  height: 80px;
  background-color: #fff;
  border-radius: 5px;
  text-align: left;
  padding-left: 20px;
  box-sizing: border-box;
}
.data-item:hover {
  box-shadow: 1px 2px 12px 0 rgba(0, 0, 0, 0.2);
}
.data-item h4 {
  padding: 0;
  margin: 0;
  margin-bottom: 10px;
  font-weight: 600;
}
</style>